<template>
  <el-card  class="box-card scroll-item" v-scroll-reveal.reset shadow="always">
    <div slot="header" class="d-flex align-items-center">
      <i class="iconfont icon-link"></i>
      <span>{{$t('friend.friend')}}</span>
      <el-button class="ml-auto" style="float: right; padding: 3px 0" type="text">
        <router-link to="/link" tag="span">{{$t('friend.exchange')}}</router-link>
      </el-button>
    </div>
    <div class="text item">
        <!-- <el-link target='_blank' :underline="false"  v-for="item in links" :href="item.href"  :key="item.id">{{item.name}}</el-link> -->
        <ul class="friendlink1">
          <li><a href="https://www.yangqq.com/">杨青博客</a></li>
          <li><a href="https://www.otaozi.cn/">刘锁博客</a></li>
          <li><a href="https://www.whongbin.com/">三里林博客</a></li>
        </ul>
        <ul class="friendlink2">
          <li><a href="http://www.nnmutong.com/">牧童个人博客博客</a></li>
          <li><a href="http://www.heanny.cn/">HeannyBlog博客</a></li>
          <li><a href="http://panjingg.com/">潘景博客</a></li>
        </ul>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Friend',
  props: {
    links: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.el-card
    i
        font-size 20px
        color #e13455
        font-weight bold
    span
        font-weight bold
    .item
      width 100%
      .el-link
        width 50%
        display inline-block
        text-align center
.friendlink1,.friendlink2
            font-size 10px
            list-style-type none
            margin-left 20px
.friendlink1 li,.friendlink2 li
            float left
            margin-left 10px
.friendlink1 li a:hover,.friendlink2 li a:hover
            color rgb(81,167,255)
</style>
